<template>
  <view>
    <!-- 头部 -->
    <view class="box_top">
      <!-- title -->
      <view class="top_title">
        <view style="position: absolute; left:0" @click="reback()">
          <uni-icons type="left" size="24"></uni-icons>
        </view>
        <view><text>经纪人详情</text></view>
      </view>


      <!-- 个人详情 -->
      <view class="perint">
        <div class="left">
          <view class="image">
            <image :src="clerk.agentLogo" style="width: 100%; height: 100%;"></image>
          </view>
        </div>

        <div class="right">
          <div class="right_item1">
            <span>{{clerk.clerkName}}</span>
          </div>
          <div class="right_item2">
            <span>{{clerk.clerkName}}</span>
          </div>
        </div>
      </view>

      <!-- 工作经验  -->
      <view class="per_btns">
        <view class="btns_item">
          <view class="item_top">
            <span>{{clerk.workingYear}}</span>
          </view>
          <view class="item_bottom">
            <span>从业</span>
          </view>
        </view>

        <view class="btns_item">
          <view class="item_top">
            <span>{{clerk.serviceCount}}</span>
          </view>
          <view class="item_bottom">
            <span>服务</span>
          </view>
        </view>

      </view>

    </view>

    <!-- 店铺详情 -->
    <view class="shopdet">
      <view class="_box1">
        <span>店铺详情</span>
      </view>
      <!--			<view class="_box2">-->
      <!--				<view class="_left">-->
      <!--					<span>公司名称:</span>-->
      <!--				</view>-->
      <!--				<view class="_left _right">-->
      <!--					<span>xx房产公司</span>-->
      <!--				</view>-->
      <!--			</view>-->

      <view class="_box2">
        <view class="_left">
          <span>所属店铺:</span>
        </view>
        <view class="_left _right">
          <span>{{clerk.storeName}}</span>
        </view>
      </view>
      <view class="_box2">
        <view class="_left">
          <span>店铺地址:</span>
        </view>
        <view class="_left _right">
          <span>{{clerk.storeAddressPath}}</span>
        </view>
      </view>

      <view class="_box2">
        <view class="_left">
          <span>主营小区:</span>
        </view>
        <view class="_left _right">
          <span>{{clerk.mainCommunity}}</span>
        </view>
      </view>


    </view>

    <!-- 房屋推荐 -->
    <view class="shopdet" style="padding-bottom: 150rpx;">
      <view class="_box1">
        <span>TA的房源 <span style="color: rgba(177, 177, 177, 1); font-weight: 400;">（{{total}}）</span> </span>
      </view>

      <!-- 推荐列表 -->
      <view class="build_class" v-for="(item,index) in houseList" :key="index">
        <view class="list_box">
          <view class="box_left">
            <view class="left_image">
              <image src="/static/logo.png" mode=""></image>
            </view>

          </view>
          <view class="box_right" @click="navigateTo('/pages/house/detail/detail?houseId='+item.id)">
            <view class="right_box1">
              <view class="box1_name"><text>{{item.title}}</text></view>
              <view class="box1_type"><text>{{item.introduce}}</text></view>
            </view>

            <view class="right_box2">
              <view class="box2_colorfont"><text>{{item.parkingSpace}}/平</text></view>
            </view>

            <view class="right_box3">
              <view class="box_font"><text>{{item.villageName}}</text></view>
            </view>

            <view class="right_box4">
              <view class="box4_list">
                <text>{{item.houseCode}}</text>
              </view>
              <view class="box4_list">
                <text>{{item.floor}}</text>
              </view>
              <view class="box4_list">
                <text>{{item.decoration}}</text>
              </view>
            </view>
          </view>
        </view>

      </view>



    </view>

    <!-- 在线联系 -->
    <view class="coninte">
      <view class="_btn1" @click="openChat(clerk.memberId)">
        <span>在线联系</span>
      </view>

      <view class="_btn1 _btn2" @click="clickItem(clerk.mobile)">
        <span>电话联系</span>
      </view>
    </view>



  </view>
</template>

<script>
import config from '@/config/config'
import  {findAgentHouseRoomList} from '@/api/house'
export default {
  data() {
    return {
      userImage: config.defaultUserPhoto,
      clerk: {},
      houseList: [],
      params: {
        agentUserId: null // 初始化时设置为 null
      },
      total: 0
    }
  },
  onLoad(options) {
    try {
      this.clerk = JSON.parse(decodeURIComponent(options.options));
      this.params.agentUserId = this.clerk.memberId; // 在获取到 clerk 后再赋值
    } catch (error) {
      console.error('参数解析失败:', error);
    }
    this.findAgentHouseRoomList2();
  },
  methods: {
    findAgentHouseRoomList2() {
      findAgentHouseRoomList(this.params).then(res => {
        if (res.data.code === 200) {
          this.houseList = res.data.rows;
          this.total = res.data.total;
        }
      });
    },
    openChat(id) {
      if (this.$options.filters.tipsToLogin()) {}
      uni.navigateTo({
        url: `/pages/mine/im/index?userId=${id}`
      });

      //this.$options.filters.talkIm(id, 'www', 'www9');

    },
    navigateTo(url){
      uni.navigateTo({
        url: url
      });
    },
    clickItem(agentPhone) {
      if (this.$options.filters.tipsToLogin()) {}
      // 拨打固定电话
      uni.makePhoneCall({
        phoneNumber: agentPhone,
      });
    },
    // 返回上一步
    reback() {
      // 返回上一步
      // uni.navigateBack({
      //   delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面
      // });
      uni.navigateTo({
        url: `/pages/tabbar/broker/index`
      });

    },
  }
}
</script>


<style lang="scss" scoped>
page {
  position: relative;
  background-color: #fff;
}

.box_top {
  width: auto;
  height: auto;
  padding: calc(20rpx + var(--status-bar-height)) 0 0 0%;
  background: linear-gradient(to bottom, rgba(204, 224, 255, 1), #FFF);
  z-index: 20;
  padding-bottom: 20rpx;

  .top_title {
    padding-top: 28rpx;
    font-size: 32rpx;
    font-weight: 600;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

  }

  .perint {
    display: flex;
    align-items: center;
    // border: 1px red solid;
    margin: auto;
    margin-top: 80rpx;
    height: auto;
    width: 100%;
    padding: 40rpx 32rpx;

    border-bottom: 1px rgba(229, 226, 226, 1) solid;

    .left {
      .image {
        height: 92rpx;
        width: 92rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .right {
      margin-left: 24rpx;

      .right_item1 {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }

      .right_item2 {
        margin-top: 12rpx;
        font-size: 24rpx;
        font-weight: 600;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .per_btns {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .btns_item {

      .item_top {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .item_bottom {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }


}

.shopdet {
  // border: 1px red solid;
  margin-top: 40rpx;
  height: auto;
  padding: 40rpx 30rpx;
  position: relative;

  ._box1 {
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
  }

  ._box2 {
    display: flex;
    align-items: center;
    margin-top: 24rpx;

    ._left {
      font-size: 28rpx;
      font-weight: 400;
    }

    ._right {
      margin-left: 24rpx;
    }
  }


  .build_class {
    // border: 1px red solid;
    padding-bottom: 40rpx;

    .list_box {
      width: 100%;
      height: auto;
      // border: 1px red solid;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      margin-top: 24rpx;

      .box_left {
        // border: 1px red solid;

        .left_image {
          width: 100px;
          height: 100px;
          border-radius: 11px;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;

          }
        }


      }

      .box_right {
        margin-left: 16rpx;
        height: 100%;

        .right_box1 {
          display: flex;
          align-items: center;

          .box1_name {
            font-size: 28rpx;
            font-weight: 600;
          }

          .box1_type {
            margin-left: 22rpx;
            width: auto;
            height: auto;
            padding: 0 8rpx;
            font-size: 24rpx;
            border: 1px #d9d9d9 solid;
            font-weight: 600;
          }
        }

        .right_box2 {
          margin-top: 8rpx;

          .box2_colorfont {
            font-size: 32rpx;
            font-weight: 800;
            color: rgb(255, 53, 40);
          }
        }

        .right_box3 {
          margin-top: 8rpx;

          .box_font {
            font-size: 24rpx;
            font-weight: 600;

          }
        }

        .right_box4 {
          display: flex;
          align-items: center;
          margin-top: 12rpx;


          .box4_list {
            height: auto;
            width: auto;
            background-color: rgb(237, 244, 255);
            color: rgb(88, 107, 144);
            padding: 4rpx 24rpx;
            border-radius: 16rpx;
            font-size: 24rpx;
            font-weight: 600;
            margin-right: 18rpx;
            white-space: nowrap;
          }
        }
      }
    }
  }


}

.coninte {
  position: fixed;
  bottom: 0;
  // border: 1px red solid;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10rpx;
  padding: 80rpx 60rpx;
  width: 100%;

  ._btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18rpx 48rpx;
    color: #FFF;
    font-size: 32rpx;
    background-color: rgba(100, 203, 253, 0.86);
  }

  ._btn2 {
    background-image: linear-gradient(to left, rgba(49, 130, 255, 1), rgba(145, 188, 255, 1));
  }
}
</style>